<template>
  <div class="wrapper">
    <div class="baner">
      <banner/>
    </div>
    <div class="container commw">
        <div class="titlewaper">
          <div>
            <p class="infotile">{{$t('index.namv')[0]}}</p>
          </div>
          <div style="padding-right:6px">
            <button class="joinButton" @click="joinchuban" >{{$t('header.nav')[4]}}</button>
          </div>
        </div>
        <div class="navinfowaper">
          <div class="navinfoitem" v-for="(item,index) in listItems" :key="index" >
              <div class="imgaewaper">
                <img :src="item.logo" v-if="item.logo" style="width:100%;height:100%px" alt="">
                <div class="image-slot" v-else>
                  <a-icon type="file-exclamation"  style="font-size: 30px;" />
                </div>
              </div>
              <div>
                <p class="chu-title" @click="handleopen(item)">{{item.name}}</p>
              </div>
              <div>
                <p class="intro">{{$t('index.navtitle')[5]}}:<span>{{item.createTime}}</span>  </p>
              </div>
          </div>
          <a-empty  v-if="listItems.length==0" description='暂无出版商!' style="width:100%"/>
        </div>
        <div class="pagination" v-if="total&&total>20">
          <a-pagination v-model="current" :total="50" @change="changepage" show-less-items />
        </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import  banner  from "~/components/banner";
import {
    getPbulisApi
} from "~/assets/js/api";
//temp1
export default {
  components: {banner},
  props: {
    propE: {
        type: Object,
        default: function () {
            return {message:'hello'}
        }
    }
  },
  data() {
    return {
        current:1,
        total:0,
        listItems:[]
    };
  },
  watch: {},
  computed: {
    ...mapGetters(['locale'])
  },
  methods: {
    handelInvite(type){
        //handelInvite path: "/login"
        this.$router.push({ path: '/partnerRecruitment', query: { type: type} })
    },
    handGetPbulis() {
            getPbulisApi({
              pressPage:{
                pageNo:this.current,
                pageSize:20
              }
            }).then((res) => {
                console.log(res, 'datadatadata')
                this.listItems=res.data.records||[]
                this.total=res.data.total
            }).catch((err) => {
                err.data?this.$message.warn(err.data.detail || '获取数据失败，请联系管理员'):'';
                console.log(err, 'err')
            });
    },
    changepage(page, pageSize){
      this.current=page
      this.handGetPbulis()
    },
    handleopen(oyem){
      console.log(oyem.domainName,'oyem.domainName')
      if( oyem.domainName){
        const protocolPattern = /^(?:[a-z]+:)?\/\//i;
        if(protocolPattern.test(oyem.domainName)){
          window.open(oyem.domainName, '_blank')
        }else{
           window.open('http://'+oyem.domainName, '_blank')
        }

      }

    },
    mousemoveBg(){
        const container = document.querySelector('.wrapper');
        container.addEventListener('mousemove', function(event) {
            const mouseX = event.clientX;
            const mouseY = event.clientY;
            const bgX = -mouseX * 0.01;  // 根据需求重新计算图片坐标
            const bgY = -mouseY * 0.01;
            container.style.backgroundPosition = `${bgX}px ${bgY}px`;
        });
        var imgs = document.querySelectorAll('.myImage');
        imgs.forEach(function(img){
            img.addEventListener('mouseover', function(e) {
                    this.classList.add('rotateIn');

            });
            img.addEventListener('mouseout', function(e) {
                this.classList.add('rotateIn');
                this.classList.remove('rotateIn');

            });
        })

    },
    joinchuban(){
        this.$router.push({ path: '/publisherapply'})
    }
  },
  created() {},
  mounted() {
    this.mousemoveBg()
    this.handGetPbulis()
  }
};
</script>
<style lang="less" scoped>
.wrapper{
    // background: url("@/static/image/banner1.png") no-repeat;
    background-size: 102% 750px;
    min-height: 1050px;
    //background-color: rgb(247, 247, 247);

    padding-bottom: 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Microsoft YaHei", "Arial";
}
.baner{
  width: 100%;
}
.container {
    margin: 0 auto;
    width: 1280px !important;
    position: relative;
}
.container:before{
    content:'';
    display:table;
}
.mian{
    width: 100%;
    border: 1px solid blue;
}
.commw{
    max-width: 75%;
}
.joinButton{
    border: none;
    background-color: #007CBB;
    color: #fff;
    text-align: center;
    padding: 8px 15px;
    border-radius: 0.25rem !important;
    cursor: pointer;
    font-size: 14px;
}
.joinButton:hover {
    text-decoration: none;
    background-color:#52b1e0;
    transition: all 0.5s ease;
}
.titlewaper{
  min-height: 90px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .infotile{
    margin: 0px;
    font-size: 32px;
    color: #000;
  }
}
.navinfowaper{
  display: flex;
  justify-content: start;
  width: 100%;
  flex-wrap: wrap;

  p{
    margin: 0px;
  }
  .navinfoitem{
    width: 31%;
    width: calc(33% - 14px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-right: 22px;
    margin-bottom: 24px;
    text-align: left;
  }
  .navinfoitem:nth-of-type(3n){margin-right:0;}
  .imgaewaper{
    width: 100%;
    overflow: hidden;
    height: 210px;
    img {
      transition: transform 0.4s ease; /* 平滑的放大效果 */
      max-width: 100%; /* 限制图片最大宽度 */
      height: auto; /* 保持图片比例 */
    }
  }
  @media screen and (max-width:1000px){

    .imgaewaper{
    width: 100%;
    overflow: hidden;
    height: 120px;
    img {
      transition: transform 0.4s ease; /* 平滑的放大效果 */
      max-width: 100%; /* 限制图片最大宽度 */
      height: 100%; /* 保持图片比例 */
    }
  }
  }
  .imgaewaper:hover img {
    transform: scale(1.06); /* 放大10% */
  }
  .chu-title{
    color: #000;
    font-size: 16px;
    margin: 10px 0px;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
  }
  .chu-title:hover{
     text-decoration: underline;
  }
  .intro{
    color: #888;
  }
}

.image-slot{
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background-color: rgb(245, 245, 245);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
